@import "~terriajs-variables";
@import "../../Sass/common/mixins";

.full-panel {
  position: absolute;
  font-family: $font-pop;
  width: 100%;
  padding-left: $padding * 2;
  padding-right: $padding * 2;
  bottom: 100px;
  z-index: 9;
  box-sizing: border-box;
  pointer-events: none;
  @include transition(padding, 0.2s);
  @media (min-width: $md) {
    padding-left: 30px + $work-bench-width;
    bottom: 90px;
    padding-right: 50px;
  }
  &.is-hidden {
    display: none;
  }
}

.isPushedUp {
  bottom: 350px;
}

.isCentered {
  padding-left: 20px;
  // when changing to full screen, the story panel should move to center slower
  // than side panel slide in/out
  transition-delay: 0.5s;
}

.story-container {
  &.is-mounted {
    opacity: 1;
    @include transform(none);
  }
  @include transform(translateY(20%));
  opacity: 0;
  @include transition(all 0.3s);
  pointer-events: auto;
  display: flex;
  opacity: 0;
  width: 100%;
  min-height: 100px;
  max-width: 1200px;
  background-color: #ffffff;
  color: $text-dark;
  text-align: left;
  box-sizing: border-box;
  margin: 0 auto;
  border-radius: 2px;
  box-shadow: 0 0 15px 6px rgba(100, 100, 100, 0.3);

  .left {
    border-right: 1px solid $field-border;
  }
  .right {
    border-left: 1px solid $field-border;
  }
}

.story {
  flex-grow: 2;
  max-width: 100%;
  @media (min-width: $sm) {
    max-width: calc(100% - 104px);
  }
}

.storyHeader {
  display: flex;
  max-width: 100%;
  overflow: hidden;
  padding: $padding;
  border-bottom: 1px solid $field-border;
  padding: 0;
  h3 {
    margin: $padding;
    font-size: 1.2rem;
    color: $dark;
    @media (max-width: $sm) {
      flex-grow: 2;
    }
  }
}

.body {
  padding: $padding * 1.5 $padding;
  color: $dark;
  font-size: 1rem;
  max-height: 400px;
  overflow-y: auto;
  img {
    max-width: 100%;
  }
  * {
    max-width: 100%;
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

.locationBtn,
.exitBtn,
.nextBtn,
.previousBtn {
  z-index: 999;
  composes: btn from "../../Sass/common/_buttons.scss";
  display: block;
  padding: $padding * 0.8 $padding * 1.6;
  &:not([disabled]):hover {
    svg {
      fill: $color-primary;
    }
  }
  svg {
    fill: #888888;
    width: 15px;
  }
}
.nextBtn,
.previousBtn {
  height: calc(100% - 51px);
  svg {
    width: 15px;
    height: 15px;
  }
}
.exitBtn {
  border-left: 1px solid $field-border;
}

.locationBtn {
  border-right: 1px solid $field-border;
  svg {
    width: 18px;
  }
}

.exitBtn,
.locationBtn {
  svg {
    height: 31px;
  }
  &,
  &:focus,
  &:hover {
    @media (min-width: $sm) {
      border: 0px;
      border-bottom: 1px solid $field-border;
    }
  }
}

.navBtn {
  flex-grow: 2;
  display: flex;
  justify-content: flex-end;
  padding: $padding * 0.8 $padding * 2.2;
  button {
    background: transparent;
    border: 0;
    box-shadow: 0;
  }
  svg {
    fill: #888888;
    float: right;
    width: 10px;
    height: 10px;
  }
}

.navBtnMobile {
  display: flex;
  width: 100%;
  bottom: -25px;
  position: absolute;
}
.mobileNavBtn {
  composes: btn from "../../Sass/common/_buttons.scss";
  background: #ffffff;
  color: $text-dark;
  padding: 2px 8px;
  border-right: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
  &.isActive {
    background: $color-primary;
    color: #ffffff;
  }
}
:global {
  .story.tjs-notification-window__wrapper {
    @media (min-width: $md) {
      left: $work-bench-width;
    }
    .tjs-notification-window__notification {
      background-color: $color-primary;
      color: #ffffff;
      border: 1px solid rgba(#ffffff, 0.1);
      text-align: center;
    }
    h3 {
    }
    .tjs-notification-window__footer {
      display: flex;
      border-top: 1px solid rgba(#ffffff, 0.8);
      button {
        background-color: transparent;
        font-weight: bold;
        &:first-of-type {
          border-right: 1px solid rgba(#ffffff, 0.8);
        }
      }
    }
  }
}
